/**
 * @author zouLing
 * @date 2018/4/26
 * @Description:
*/
import React, { Component } from 'react';
import { DatePicker, Tag, Icon, Flex, NavBar, List, WingBlank, InputItem, Modal } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import common from './common.css';
import styles from './orderDetials.css';
import { getNowFormatDate } from '../utils/utils.js';

const nextTime = new Date();
nextTime.setYear(nextTime.getFullYear() + 1);
const nowTimeStamp = Date.now();
const minDate = new Date(nowTimeStamp);
const maxDate = new Date(nextTime);

const Item = List.Item;
const alert = Modal.alert;

class orderDetials extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: minDate,
      tagArray: [],
      height: document.documentElement.clientHeight * 1 / 5,
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'global/getCarAllData',
      payload: { customerId: 1 },
    });
    this.props.dispatch({
      type: 'user/getUserList',
      payload: { customerId: 1 },
    });
  }

  changeTag=(selected, value) => {
    let array = [];
    array = this.state.tagArray;
    if (selected) {
      array.push(value);
    } else {
      array.splice(array.findIndex(item => item === value), 1);
    }
    this.setState({
      tagArray: array,
    });
    this.props.dispatch({
      type: 'global/orderDetials',
      payload: array,
    });
  }
  sumbOrder = () => {
    const date = getNowFormatDate(this.state.date);
    this.props.dispatch({
      type: 'user/commotData',
      payload: { date },
    });
    alert('提交订单', '是否确认提交', [
      { text: '否' },
      { text: '是',
        onPress: () => {
          this.props.dispatch({ type: 'car/postCarOrderToSever',
            payload: this.props.user.orderData,
          });
        },
      },
    ]);
  }
  render() {
    const { customerName, contactTel } = this.props.user;
    const { orderDetial } = this.props.global;
    const { height } = this.state;
    return (
      <div>
        <NavBar
          mode="light"
          style={{ backgroundColor: '#F0F0F0' }}
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.dispatch(
            routerRedux.push('/shoppingCar'))}
        >订单详情
        </NavBar>
        <div>
          <List renderHeader={() => '提交订单'}>
            <InputItem
              value={customerName}
              editable={false}
            >收货单位
            </InputItem>
            <InputItem
              value={contactTel}
              editable={false}
            >电话
            </InputItem>
            <DatePicker
              mode="date"
              title="收货日期"
              extra="选择收货日期"
              minDate={minDate}
              maxDate={maxDate}
              value={this.state.date}
              onChange={date => this.setState({ date })}
            >
              <List.Item arrow="horizontal">收货日期</List.Item>
            </DatePicker>
          </List>
          <div className={styles.orderPreReading}>订单预览
          </div>
          <div className="tag-container " style={{ borderBottom: '10px solid #E9E9E9' }}>
            { this.props.global.tages.map((item, index) => {
               return (<Tag keys={index} className={styles.tagStyle} onChange={select => this.changeTag(select, item)}>{item}</Tag>);
            }) }
          </div>
          <div >
            <List style={{ height }}>
              {orderDetial.map((item) => {
              return (
                <List.Item extra={<span>数量:{item.count}</span>}>
                  <div>{`${item.internalName}( ${item.unitName})`}</div>
                </List.Item>
);
            })}
            </List>
          </div>
          <div className={common.bottomStyle}>
            <Flex justify="between">
              <Flex.Item className={common.bottomTotal}><span style={{ fontSize: '15px' }}>共{orderDetial.length}</span>种</Flex.Item>
              <Flex.Item style={{ margin: 0 }} onClick={this.sumbOrder}className={common.bottomButtom}><span style={{ fontSize: '15px' }}>提交订单</span></Flex.Item>
            </Flex>
          </div>
        </div>
      </div>
    );
  }
}
export default connect(({ global, user }) => ({ global, user }))(orderDetials);
